<!-- 时钟组件，用于显示当前日期和时间 -->
<template>
  <!-- 时钟容器，垂直居中显示内容 -->
  <div class="clock-container">
    <!-- 显示格式化后的日期 -->
    <p class="date">{{ formattedDate }}</p>
    <!-- 显示格式化后的时间 -->
    <p class="time">{{ formattedTime }}</p>
  </div>
</template>

<script lang="ts" setup>
// 导入 moment 库，用于日期和时间的格式化
import moment from 'moment';
// 导入 Vue 组合式 API
import { ref, computed, onMounted, onUnmounted, type ComputedRef } from 'vue';

/**
 * 当前时间的响应式引用
 * 初始值为当前日期和时间
 */
const currentTime = ref<Date>(new Date());

/**
 * 计算属性，返回格式化后的日期
 * 格式示例：2025年05月01日
 */
const formattedDate: ComputedRef<string> = computed(() => {
  return moment(currentTime.value).format('YYYY年MM月DD日');
});

/**
 * 计算属性，返回格式化后的时间
 * 格式示例：20:01:01
 */
const formattedTime: ComputedRef<string> = computed(() => {
  return moment(currentTime.value).format('HH:mm:ss');
});

// 定时器 ID，用于在组件卸载时清除定时器
let timer = null as number | null;

/**
 * 组件挂载时的生命周期钩子
 * 启动定时器，每秒更新一次当前时间
 */
onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = new Date();
  }, 1000);
});

/**
 * 组件卸载时的生命周期钩子
 * 清除定时器，防止内存泄漏
 */
onUnmounted(() => {
  if (timer) clearInterval(timer);
});
</script>

<style lang="scss" scoped>
/**
 * 时钟容器样式
 * 垂直居中显示内容，设置字体样式
 */
.clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; // 占满父容器高度
  font-family: 'Segoe UI', sans-serif;
  font-weight: 500;

  /**
   * 日期显示样式
   * 设置字体大小和底部边距
   */
  .date {
    font-size: 2rem;
    margin-bottom: 8px;
    margin: 0;
  }

  /**
   * 时间显示样式
   * 设置字体大小、字重和字母间距
   */
  .time {
    font-size: 4.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0;
  }
}
</style>